<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>玉灵 QQ:7031633 Email:webrx@126.com</title>
    <meta name="keywords" content="关键字">
    <meta name="description" content="简介">
</head>

<body>
<input type="file" name="" id="file">
<button onclick="up()">upfile</button>
<script>
    // 文件上传
    // 流程:
    // 1. 客户端将文件数据发送给服务器
    // 2. 服务器保持上传的文件到服务端
    // 3. 服务器响应给客户端一个文件访问地址
    // 键的名称(表单域名称): 服务端要求



    // 请求方法: Post
    // 请求表单的格式: 一般为 multipart/form-data
    // 请求体重必须包含一个键值对,键的名称是服务器要求的名称,值是文件数据

    // HTML中,JS仍然随意获取文件数据,但是可以获取到input元素中,被用户选中的文件数据

    async function upload() {
        const inp = document.getElementById("file");
        if (inp.files.length === 0) {
            alert("请选择上传文件")
            return false;
        }
        // 这里的请求体自己构建比较麻烦,一般使用HTML5里面的formData来构建
        const formData = new FormData();
        formData.append("key", inp.files[0]);
        const url = "http://localhost/api/upf";
        const resp = await fetch(url, {
            method: "POST",
            body: formData //自动修改请求头,formdata的默认请求头的格式是 multipart/form-data
        })

        const res = await resp.json();
        // res 就是服务器返回的结果
    }


    function up(){
        upload().then(res=>res.text()).then(res=>{
            console.log(res)
        }).catch(e=>console.log(e))

    }
</script>
</body>
</html>
